<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <base href="<%=basePath%>"> 
    
    <title>My JSP 'register.jsp' starting page</title> 
    
 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <!-- 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 --> 
  <script type="text/javascript">
  function validateName(){
   //提示用户名可不可用
   var sp = document.getElementById("sp");
   //获取页面输入的用户名
   var name = document.getElementById("uname").value;
   
   //1.创建AJAX对象
   var xhr = new XMLHttpRequest();
   //2.新建请求 (请求方式 请求地址 是否同步)
   xhr.open("post", "UserServlet.do", true);
   //3.请求头
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //4.请求体
   xhr.send("method=validateName&uname="+name);
   
   //5.前后台交互验证
   xhr.onreadystatechange = function(){
    //正常交互
    if(xhr.status==200 && xhr.readyState==4){
     //6.得到返回结果,并利用结果判断用户名是否可用
     var result = xhr.responseText;
       //返回true,可用
     if("true"==result){
      //判用户名是否为空
      if(name==null||name==""){
       sp.style.color = "red";
       sp.innerHTML = "用户名不可为空";
      }else{
       sp.style.color = "green";
       sp.innerHTML = "用户名可用";
      }
     }else{  //返回false,用户名不可用
      sp.style.color = "red";
      sp.innerHTML = "用户名不可用";
     }
     
    }
   };
  }
 </script> 
  </head> 
  
  <body> 
    用户名:<input type="text" name="username" id="uname" οnblur="validateName()"><span id="sp"></span><br/>
    头像：<input type="file"><br>
    <button type="submit">注册</button> 
  </body> 
</html>